<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
		p {
			width: 350px;
			text-align: center;
			/*color: white;*/
			font: normal 20px/40px "Microsoft Yahei";
			border-radius: 10px;
			/*background-color: green;*/
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			width: 350px;
		}
		li{
			float: left;
			width: 50px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
	</style>

</head>
<body>
<div class = "wrapper">
		<p>AUGUST</p>
		<ul>
			<li>SUN</li>
			<li>MON</li>
			<li>TUE</li>
			<li>WED</li>
			<li>THU</li>
			<li>FRI</li>
			<li>SAT</li>
		</ul>
		<ul class = "date">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ul>
	</div>	
	<script src="jquery-3.3.1.min.js"></script>
	<script>
		// $(function(){
		$('.wrapper p').css({'color':'white','background-color':'green','font-weight':'bold'});
		$('.date>li:first-child').css('font-size','20px');
		$('.date>li:last-child').css('font-size','20px');
		$('.wrapper ul:first-of-type').css('font-weight','bold');
		$('.date>li:nth-child(7n+1)').css('color','red');
		$('.date>li:nth-child(7n+7').css('color','red');
	// <!-- }) -->
	</script>
</body>
</html>